<template>
  <div class='container'>
    <el-card class="box-card">
      <!-- 我是精选题库表单 -->
      <!-- 点击新增跳转到试题录入 -->
       <div class="editor">
         <el-button icon="el-icon-edit"
          type="success"
          size="small"
          @click="$router.push('new')">新增按钮</el-button>
       </div>
      <el-form ref="form" :model="form" label-width="70px">
         <!-- 第一行 -->
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="学科" prop="subjectID">
              <el-select class="common" clearable v-model="form.subjectID" placeholder="请选择学科">
                <el-option v-for="sub in subList" :key="sub.value" :label="sub.label" :value="sub.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="二级目录" prop="catalogID">
              <el-select class="common" clearable v-model="form.catalogID" placeholder="请选择目录">
                <el-option v-for="dir in DirList" :key="dir.value" :label="dir.label" :value="dir.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
              <el-form-item label="标签" prop="tags">
                <el-select class="common" clearable v-model="form.tags" placeholder="请选择标签">
                  <el-option v-for="tag in TagList" :key="tag.value" :label="tag.label" :value="tag.value"></el-option>
                </el-select>
              </el-form-item>
          </el-col>
          <el-col :span="6">
              <el-form-item label="关键字" prop="keyword">
                <el-input class="common" v-model="form.keyword" placeholder="请输入关键字"></el-input>
              </el-form-item>
          </el-col>
        </el-row>
        <!-- 第二行 -->
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="试题类型" prop="questionType">
              <el-select class="common" clearable v-model="form.questionType" placeholder="请选择试题类型">
                <el-option v-for="(type,idx) in questionList" :key="idx" :label="type.label" :value="type.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="难度" prop="difficulty">
              <el-select class="common" clearable v-model="form.difficulty" placeholder="请选择难度">
                <el-option v-for="(item, idx) in difficultyList" :key="idx" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
             <el-form-item label="方向" prop="direction">
               <el-select class="common" clearable v-model="form.direction" placeholder="请选择方向">
                <el-option v-for="(item, idx) in directionList" :key="idx" :label="item" :value="item"></el-option>
              </el-select>
              </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="录入人" prop="creatorID">
              <el-select class="common" clearable v-model="form.creatorID" placeholder="请选择活动区域">
                <el-option v-for="user in userList" :key="user.id" :label="user.username" :value="user.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 第三行 -->
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="题目备注" prop="remarks">
              <el-input class="common" v-model="form.remarks" placeholder="请输入备注"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="企业简称" prop="shortName">
              <el-input class="common" v-model="form.shortName" placeholder="请输入企业简称"></el-input>
            </el-form-item>
          </el-col>
          <!-- 两个下拉列表 -->
          <el-col :span="6">
            <el-form-item class="aGcen" label="城市" prop="city">
              <el-select filterable clearable v-model="form.city" placeholder="城市">
                <el-option
                  v-for="(item, idx) in cityList"
                  :key="idx"
                  :label="item"
                  :value="item">
                </el-option>
              </el-select>
              <el-select
               filterable
                clearable
                v-model="form.province"
                collapse-tags
                placeholder="地区">
                <el-option
                  v-for="(item, idx) in province"
                  :key="idx"
                  :label="item"
                  :value="item">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 清除筛选按钮 -->
          <el-col :span="6">
          <el-form-item class="fmRg">
            <el-button size="mini" @click="resetForm">清除</el-button>
            <el-button size="mini" type="primary" @click="submitForm">筛选</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- ------------------------------------------------- -->
      <!-- 下方tabs 切换部分 -->
      <el-tabs v-model="chkState" type="card" @tab-click="handleClick">
        <el-tab-pane label="全部"  name="null"></el-tab-pane>
        <el-tab-pane label="待审核" name="0"></el-tab-pane>
        <el-tab-pane label="已审核" name="1"></el-tab-pane>
        <el-tab-pane label="已拒绝" name="2"></el-tab-pane>
      </el-tabs>
      <!-- -------------------------------------------------- -->
      <!-- 总条数区域 -->
      <div class="counts"><i class="el-icon-info"></i>{{'数据一共'+counts+'条'}}</div>
      <!-- -------------------------------------------------- -->
      <!-- table 表格渲染区域 -->
      <el-table
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column
          prop="number"
          label="试题编号"
          width="150">
        </el-table-column>
        <el-table-column
          prop="subject"
          label="学科"
          width="120">
        </el-table-column>
        <el-table-column
          prop="catalog"
          label="目录"
          width="120">
        </el-table-column>
        <el-table-column
          prop="questionType"
          label="题型"
          width="120">
          <template slot-scope="scope">
            <p v-if="scope.row.questionType === '1' "> 单选 </p>
            <p v-if="scope.row.questionType === '2' "> 多选 </p>
            <p v-if="scope.row.questionType === '3'"> 简答 </p>
          </template>
        </el-table-column>
        <el-table-column
          label="题干"
          width="300">
          <template slot-scope="scope">
            <p v-html="scope.row.question"></p>
          </template>
        </el-table-column>
        <el-table-column
          label="录入时间"
          width="180">
          <template slot-scope="scope">
            <p>{{scope.row.addDate | formattime}}</p>
          </template>
        </el-table-column>
        <el-table-column
          label="难度"
          width="120">
          <template slot-scope="scope">
            <p v-if="scope.row.difficulty === '1' "> 简单 </p>
            <p v-if="scope.row.difficulty === '2' "> 一般 </p>
            <p v-if="scope.row.difficulty === '3' "> 困难 </p>
          </template>
        </el-table-column>
        <el-table-column
          prop="creator"
          label="录入人"
          width="120">
        </el-table-column>
        <el-table-column
          label="审核状态"
          width="120">
          <template slot-scope="scope">
            <p v-if="scope.row.chkState === 0 "> 待审核 </p>
            <p v-if="scope.row.chkState === 1 "> 通过 </p>
            <p v-if="scope.row.chkState === 2 "> 拒绝 </p>
          </template>
        </el-table-column>
        <el-table-column
          prop="chkRemarks"
          label="审核意见"
          width="120">
        </el-table-column>
        <el-table-column
          prop="chkUser"
          label="审核人"
          width="120">
        </el-table-column>
        <el-table-column
          label="发布状态"
          width="120">
          <template slot-scope="scope">
            <p>{{scope.row.publishState === 1 ? '上架' : '下架'}}</p>
            <!-- <p v-if="scope.row.publishState === 1 "> 上架 </p>
            <p v-if="scope.row.publishState === 0 "> 下架 </p> -->
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          align="center"
          width="220">
          <template slot-scope="scope">
            <el-button
            type="text"
            @click="previewClick(scope.$index, scope.row)"
            size="small">预览</el-button>
            <el-button @click="checkClick(scope.$index, scope.row)" type="text" :disabled="scope.row.chkState !== 0" size="small">审核</el-button>
            <el-button @click="amendClick(scope.$index, scope.row)" type="text" :disabled="scope.row.publishState === 1" size="small">修改</el-button>
            <el-button @click="soldClick(scope.$index, scope.row)" type="text" size="small">
              {{scope.row.publishState === 1 ? '下架' : '上架'}}
            </el-button>
            <el-button @click="delClick(scope.$index, scope.row)" type="text" size="small"
            :disabled="scope.row.publishState === 1">删除</el-button>
          </template>
        </el-table-column>
    </el-table>
    <!-- 分页----------------------------------------------- -->
      <el-pagination
      class="pageRg"
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="10"
      layout="prev, pager, next, sizes, jumper"
      :total="counts">
      </el-pagination>
      <!-- 题目预览弹出层  v-if="isdialog"----------------------------------- -->
      <question-pre
       v-model="isdialog"
       :id = "id"
       >
      </question-pre>
      <!-- 题目审核弹出层11 ----------------------------------- -->
      <question-check
        v-model="checkDialog"
        :id="checkId"
        @refQuestionList="refQuestionList"
      >
      </question-check>
    </el-card>
  </div>
</template>

<script>
// 时间过滤器
import moment from 'moment'
// 引入预览弹出层组件
import questionPre from '../components/questions-preview.vue'
// 引入审核弹出层组件
import questionCheck from '../components/questions-check.vue'
// 录入人得获取
import { list as userList } from '@/api/base/users.js'
// 学科列表
import { simple as subList } from '@/api/hmmm/subjects.js'
// 二级目录
import { simple as dirList } from '@/api/hmmm/directorys.js'
// 标签列表
import { simple as tagList } from '@/api/hmmm/tags.js'
// 常量    难度         题型         方向   发布状态status  审核状态chkType
import { difficulty, questionType, direction } from '@/api/hmmm/constants.js'
// 引入常量城市 与城市下的地区
import { provinces, citys } from '@/api/hmmm/citys.js'
// 精选题库常用接口列表数据，商品上下架 删除题库
import { choice, choicePublish, remove } from '@/api/hmmm/questions.js'
export default {
  name: 'choice-page',
  data () {
    return {
      form: {
        // 学科
        subjectID: null,
        // 目录
        catalogID: null,
        // 标签名称
        tags: null,
        // 热词
        keyword: '',
        // 试题类型
        questionType: null,
        // 难度
        difficulty: null,
        // 方向
        direction: '',
        // 录入人
        creatorID: null,
        // 题目备注
        remarks: '',
        // 企业简称
        shortName: '',
        // 企业所在地
        province: '',
        // 企业所在城市
        city: ''
      },
      // 第几页
      page: 1,
      // 每页多少条
      pagesize: 10,
      // 当前页
      currentPage: 1,
      // 一共多少数据
      counts: null,
      // 学科列表
      subList: [],
      // 二级列表
      DirList: [],
      // 标签列表
      TagList: [],
      // 录入人列表
      userList: [],
      // 城市列表
      cityList: provinces(),
      // 地区列表
      province: [],
      // 题型总数
      questionList: questionType,
      // 难度列表
      difficultyList: difficulty,
      // 方向列表
      directionList: direction,
      // 审核状态
      chkState: 'null',
      // 发布状态
      chkType: null,
      // 表格数据
      tableData: [],
      // 题目预览弹出层组件是否弹出
      isdialog: false,
      // 题目预览当前行的id
      id: null,
      // 题目审核弹出层
      checkDialog: false,
      // 题目审核传入的id
      checkId: null
    }
  },
  // 生命周期 - vue实例创建完成（访问当前this实例）
  created () {
    // 获取tableList 列表
    this.getTablelist()
    // 学科列表
    this.getSubList()
    // 目录列表
    this.getDirList()
    // 标签列表
    this.getTagList()
    // 录入列表
    this.getuserList()
  },
  // 生命周期 - dom挂载完成（访问DOM元素）
  mounted () {},
  // 组件注册
  components: {
    questionPre,
    questionCheck
  },
  methods: {
    // 子触发父组件的方法
    refQuestionList () {
      this.getTablelist()
    },
    // 操作预览
    previewClick (idx, row) {
      this.id = row.id
      this.isdialog = true
    },
    // 审核
    checkClick (idx, row) {
      this.checkId = row.id
      this.checkDialog = true
    },
    // 修改跳转
    amendClick (idx, row) {
      // 路由跳转到试题录入即可传递试题ID
      this.$router.push({ path: 'new', query: { id: row.id } })
    },
    // 下架上架切换
    soldClick (idx, row) {
      let { id, publishState } = row
      const title = publishState === 1 ? '下架' : '上架'
      this.$confirm(`确认${title}？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async _ => {
          try {
            publishState === 1 ? publishState = 0 : publishState = 1
            const res = await choicePublish({ id, publishState })
            console.log(res)
            if (res.data.success === true) {
              row.publishState = publishState
            }
            this.$message.success('操作成功')
          } catch (error) {
            console.log(error)
            this.$message.error('操作失败')
          }
        })
        .catch(_ => {})
    },
    // 删除精品题库试题
    delClick (idx, row) {
      // 提示框
      this.$confirm('此操作将永久删除该题目是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async _ => {
        try {
          const res = await remove({ id: row.id })
          console.log(res)
          this.$message.success('删除成功')
          // 刷新列表
          this.getTablelist()
        } catch (error) {
          console.log(error)
          this.$message.error('删除成功')
        }
      }).catch(_ => {})
    },
    // 数据列表获取------------------------------------------
    async getTablelist () {
      try {
        if (this.chkState !== 'null') {
          const res = await choice({ ...this.form, page: this.page, pagesize: this.pagesize, chkState: this.chkState })
          console.log('table列表', res)
          // 数据渲染列表赋值
          this.tableData = res.data.items
          // 一共多少条列表
          this.counts = res.data.counts
        } else {
          const res = await choice({ ...this.form, page: this.page, pagesize: this.pagesize })
          console.log('table列表', res)
          // 数据渲染列表赋值
          this.tableData = res.data.items
          // 一共多少条列表
          this.counts = res.data.counts
        }
      } catch (error) {
        console.log(error)
      }
    },
    // tabs 改变事件-----------------------------------------
    handleClick () {
      this.getTablelist()
    },
    // 分页系统设置-------------------------------------------
    // 每页多少条改变时使用
    handleSizeChange (val) {
      this.pagesize = val
      // 获取数据
      this.getTablelist()
    },
    // 当前页改变时触发
    handleCurrentChange (val) {
      // 第几页
      this.page = val
      // 当前页
      this.currentPage = val
      // 获取数据
      this.getTablelist()
    },
    // 表单按钮区域---------------------------------------------
    // 确认筛选按钮
    submitForm () {
      this.getTablelist()
    },
    // 重置表单按钮
    resetForm () {
      this.$refs.form.resetFields()
    },
    // ---------------------------------------------------------
    // 获取学科列表
    async getSubList () {
      try {
        const res = await subList()
        console.log('学科列表', res)
        this.subList = res.data
      } catch (error) {
        console.log('学科列表获取失败', error)
      }
    },
    // 获取二级目录
    async getDirList () {
      try {
        const res = await dirList()
        console.log('目录列表', res)
        this.DirList = res.data
      } catch (error) {
        console.log('目录列表获取失败', error)
      }
    },
    // 获取标签列表
    async getTagList () {
      try {
        const res = await tagList()
        this.TagList = res.data
        console.log('标签列表', res)
      } catch (error) {
        console.log('标签列表失败', error)
      }
    },
    // 获取录入人
    async getuserList () {
      try {
        const res = await userList()
        this.userList = res.data.list
        console.log('录入列表', res)
      } catch (error) {
        console.log('录入列表失败', error)
      }
    }
  },
  // 城市 地区
  watch: {
    'form.city': function (newCity) {
      // console.log(newCity)
      this.form.province = ''
      this.province = citys(newCity)
    }
  },
  // 时间过滤器
  filters: {
    formattime: function (val) {
      // hh:mm:ss
      return moment(val).format('YYYY-MM-DD hh:mm:ss')
    }
  }
}
</script>

<style lang='less' scoped>
.box-card{
  margin: 20px;
}
.editor{
  text-align: right;
  margin-bottom: 15px;
}
.aGcen{
  .el-select{
    float: left;
    width: 48%;
  }
  .el-select:nth-child(1){
    margin-right: 4%;
  }
}
.fmRg{
  float: right;
}
.counts{
  height: 30px;
  line-height: 30px;
  margin: 0px 0 15px;
  font-size: 14px;
  color: #909399;
  background-color: #eeeeee;
  i{
    margin: 0 10px;
  }
}
.pageRg{
  float: right;
  margin: 15px 0;
}
.common{
  width: 100%;
}
</style>
